<template>
  <div>
    <div>
      <div style="margin-bottom: 20px">
        <Col span="5"><Input style="width: 90%;" placeholder="名称" v-model="name"/></Col>
        <Button type="info"><Icon type="md-search"/>搜索</Button>
        <Button type="info"  style="margin-left: 10px" @click="addSociety"><Icon type="md-add"/>添加</Button>
      </div>
      <template>
        <Table border :columns="columns" :data="data">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="updateSociety(row)">编辑</Button>
            <Button type="error" size="small" style="margin-right: 5px" @click="deleteSociety(row)">删除</Button>
          </template>
        </Table>
      </template>
    </div>
    <Modal v-model="modal" title="社会组织" @on-ok="saveSociety" width="1000">
      <Form :model="societyInfo">
        <Row class="bench_search">
          <Col span="3" align="right" style="padding-top: 8px;">
            <span style="color: red">*</span>
            名称：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.name"></Input>
          </Col>
          <Col span="4" align="right" style="padding-top: 8px;">
            <span style="color: red">*</span>
            法人姓名：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.fr_name"></Input>
          </Col>
        </Row>

        <Row class="bench_search">
          <Col span="3" align="right" style="padding-top: 8px;">
            <span style="color: red">*</span>
            法人身份证号：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.fr_cardno"></Input>
          </Col>
          <Col span="4" align="right" style="padding-top: 8px;">
            <span style="color: red">*</span>
            法人电话号：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.fr_phone"></Input>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="3" align="right" style="padding-top: 8px;">
            <span style="color: red">*</span>
            统一社会信用代码：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.tyshxydm"></Input>
          </Col>
          <Col span="4" align="right" style="padding-top: 8px;">
            <span style="color: red">*</span>
            发证机关：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.fzjg"></Input>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="3" align="right" style="padding-top: 8px;">社会组织描述：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.remarks"></Input>
          </Col>
          <Col span="4" align="right" style="padding-top: 8px;">社会组织地址：</Col>
          <Col span="8" >
            <Input v-model="societyInfo.address"></Input>
          </Col>
        </Row>

        <Row class="bench_search">
          <Col span="3" align="right" style="padding-top: 8px;">社会组织面积：</Col>
          <Col span="6" >
            <Input v-model="societyInfo.shzz_area"></Input>
          </Col>
          <Col span="2" style="padding-top: 8px;">单位：㎡</Col>
          <Col span="4" align="right" style="padding-top: 8px;">
            <span style="color: red">*</span>
            坐标：</Col>
          <Col span="6" >
            <Input v-model="societyInfo.csc_mapjson" disabled></Input>
          </Col>
          <Col span="2" >
            <Button @click="pickMap">选择</Button>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="3" align="right" style="padding-top: 8px;">社会组织图片：</Col>
          <Col span="4" >
            <Upload multiple action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles" :before-upload="beforeUpload">
<!--              <img v-if="imgShow || societyInfo.shzz_img" :src="societyInfo.shzz_img" style="width: 50px;height: 50px;margin-bottom: 20px"/>-->
              <Button icon="ios-cloud-upload-outline" style="margin-bottom: 20px">上传图片</Button>
            </Upload>
          </Col>
          <Col span="4"><button style="height: 30px;width: 70px;" @click="clearUploadedImage">重新上传</button></Col>
        </Row>
        <Row class="bench_search">
          <Col span="3"></Col>
          <Col span="4" v-for="item in imgList" v-bind:key="item">
            <img v-if="imgShow || imgList" :src="item" style="width: 80px;height: 80px;margin-bottom: 20px"/>
          </Col>
        </Row>

      </Form>
    </Modal>
    <Modal v-model="modalMap" fullscreen title="地图选点" @on-ok="pickMapOK">
      <template>
        <div class="amap-page-container">
          <!--     地图     -->
          <el-amap vid="amap8" class="amap-demo" :zoom="zoom" :center="center" :events="events">
            <!--     地图标记     -->
            <el-amap-marker vid="index_center" :position="center"></el-amap-marker>
          </el-amap>
        </div>
        <div class="toolbar">
          <h2>当前选中坐标: [{{ lng }}, {{ lat }}] <span v-if="this.address!=''">地址:</span> {{ address }}</h2>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script>
import {
  addSociety,
  findSocietyList,
  deleteSociety
} from '@/api/eventlist'
import { createUpLoadFiles, getSign } from '../../../../api/common'

export default {
  name: 'society',
  props: {
    pickInfo: Object
  },
  data () {
    let self = this
    return {
      upPicData: {
        fileName: 'module',
        filePath: 'grid/module'
      },
      imgShow: false,
      imgList: [],
      name: '',
      columns: [
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '法定代表人',
          key: 'fr_name',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      data: [],
      modal: false,
      societyInfo: {},
      modalMap: false,
      zoom: 16, // 缩放
      address: '',
      lng: 0,
      lat: 0,
      center: [123.4650090000, 41.6772870000],
      events: {
        click (e) {
          let { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          // 这里通过高德 SDK 完成。
          const geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress
                self.$nextTick()
              }
            }
          })
          self.center = [lng, lat]
        }
      }
    }
  },
  methods: {
    clearUploadedImage () {
      this.imgList = []
      this.imgShow = false
    },
    init () {
      let data = {
        id: this.pickInfo.id
      }
      findSocietyList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    addSociety () {
      this.societyInfo = {}
      this.modal = true
      this.imgShow = false
      this.center = this.autoCenter(this.pickInfo.csc_mapjson)
    },
    pickMapOK () {
      let x = this.lng + ',' + this.lat
      this.societyInfo.csc_mapjson = x
    },
    pickMap () {
      this.modalMap = true
    },
    // 根据多边形自动取中心点
    autoCenter (map) {
      let path = JSON.parse(map)
      let total_lng = 0.0
      let total_lat = 0.0
      path.forEach(arr => {
        total_lng += arr[0]
        total_lat += arr[1]
      })
      let newlng = total_lng / path.length
      let newlat = total_lat / path.length
      let newCenter = [newlng, newlat]
      return newCenter
    },
    saveSociety () {
      if (!this.societyInfo.name) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项名称' })
        return
      }
      if (!this.societyInfo.fr_name) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项法人姓名' })
        return
      }
      if (!this.societyInfo.fr_cardno) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项法人身份证号' })
        return
      }
      if (!this.societyInfo.fr_phone) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项法人联系方式' })
        return
      }
      if (!this.societyInfo.tyshxydm) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项统一社会信用代码' })
        return
      }
      if (!this.societyInfo.fzjg) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项发证机关' })
        return
      }
      if (!this.societyInfo.csc_mapjson) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项坐标' })
        return
      }
      let shzz_img = ''
      this.imgList.forEach(function (item) {
        if (shzz_img) {
          shzz_img = shzz_img + ',' + item
        } else {
          shzz_img = item
        }
      })
      this.societyInfo.shzz_img = shzz_img
      let data = {
        societyInfo: this.societyInfo,
        pickInfo: this.pickInfo
      }
      addSociety(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
        }
      })
    },
    updateSociety (e) {
      this.societyInfo = {}
      this.societyInfo = e
      if (e.shzz_img) {
        this.imgList = e.shzz_img.split(',')
      }
      this.modal = true
      let x = this.societyInfo.csc_mapjson.split(',')
      this.center = []
      this.center.push(x[0])
      this.center.push(x[1])
    },
    deleteSociety (e) {
      let data = {
        id: e.id
      }
      deleteSociety(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '删除失败', desc: ret.data.errmsg })
        }
      })
    },
    beforeUpload (file) {
      this.societyInfo.shzz_img = ''
      this.imgShow = false
      var time = new Date().getTime()
      let timeStep = time.toString()
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.fileName = that.upPicData.fileName + timeStep + '.' + file.type.substring(6)
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      let timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          let url = res.data.data.docking_url
          let params = {
            sign: res.data.data.sign,
            timestamp: timeStep,
            filePath: obj.filePath,
            fileName: obj.fileName,
            file: obj.file
          }
          createUpLoadFiles(url, params).then(res => {
            if (res.data.errcode === 0) {
              this.societyInfo.shzz_img = res.data.data
              this.imgList.push(res.data.data)
              this.imgShow = true
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.bench_search {
  margin-bottom: 10px;
}
  .amap-demo {
    height: 600px;
  }
  /*// 表格滚动条*/
  .ivu-table-overflowX {
    overflow-x: hidden;
  }

  /*// 模态框*/
  .item1 {
    height: 42px;
    line-height: 40px;
  }

  /*// 地图*/
  .amap-page-container {
    position: relative;
    width: 100%;
    height: 88%;
  }

  /*// 地图选点预览工具栏*/
  .toolbar {
    display: block;
    text-align: center;
    height: 20px;
    margin-top: 50px;
  }
</style>
